<template>
	<view>
		<home :cur="PageCur" v-if="PageCur=='home'" :key="commponent1Key"></home>
		<order :cur="PageCur" v-if="PageCur=='order'" isShow="1" :key="commponent1Key"></order>
		<uplevel :cur="PageCur" v-if="PageCur=='uplevel'"  isShow="1" :key="commponent1Key"></uplevel>
		<team :cur="PageCur" v-if="PageCur=='team'"  isShow="1" :key="commponent1Key"></team>
		
		<people v-if="PageCur=='people'" isShow="1" :key="commponent2Key"></people>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view :class="PageCur=='home'?'action text-red':'action text-gray'" @click="NavChange" data-cur="home">
				<view class='cuIcon-homefill'></view>首页
			</view>
			<view :class="PageCur=='order'?'action text-red':'action text-gray'" @click="NavChange" data-cur="order">
				<view class='cuIcon-order'></view> 我的订单
			</view> 
			<view :class="PageCur=='uplevel'?'action text-red':'action text-gray'"
			      @click="NavChange" data-cur="uplevel" style="height: 120px;border-radius: 70%;">
			  <view class="circle-wrapper">
			    <view><svg t="1689698365746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2589" width="48" height="48"><path d="M493.4144 0l32.0192 0c-1.3744 15.3696 0.768 17.2544 7.9808 23.0096 82.5008 65.5008 142.3376 155.9888 171.1808 268.2736-128.768-0.68-260.2928 1.3728-387.344-1.0336 27.6416-99.8352 77.0944-184.1376 146.1104-246.2096 8.4096-7.552 27.8992-19.5712 30.0512-27.0384C494.8672 11.848 492.1248 1.464 493.4144 0L493.4144 0 493.4144 0 493.4144 0zM310.2064 321.336l402.3712 0c9.272 46.1792 18.112 96.656 16.0592 147.1376-2.0656 49.9664-11.8512 98.5536-21.04 141.1328-19.4 90.0608-43.0048 175.904-67.0432 257.2912l-256.256 0c-27.2992-78.2128-49.2768-165.6048-69.1088-255.2256-18.7168-84.5664-32.1088-196.5088-6.0032-287.248C309.0944 322.8752 309.0944 321.5056 310.2064 321.336L310.2064 321.336 310.2064 321.336 310.2064 321.336zM433.3184 443.4064c-17.6832 56.064 21.2016 108.512 78.0288 108.0816 23.3552-0.1712 48.0784-12.5312 61.04-27.0368 47.5664-52.7968 7.2128-145.256-69.1072-137.104C464.9968 391.4656 442.2496 415.2448 433.3184 443.4064L433.3184 443.4064 433.3184 443.4064 433.3184 443.4064zM125.0352 637.5936l0-30.9904c8.6704-84.0432 62.7536-128.1712 132.1216-148.176 11.1552 127.6592 37.2608 240.2928 73.0576 343.3072-27.2144 38.2944-57.5184 78.4656-55.032 143.1104C190.5376 877.112 134.5664 780.6176 125.0352 637.5936L125.0352 637.5936 125.0352 637.5936 125.0352 637.5936zM766.6592 458.4272c50.4816 15.4576 88.768 40.5248 111.0912 81.0416 23.528 42.752 22.8368 104.4816 12.0224 164.1472-9.6128 52.88-28.672 98.4624-53.0528 139.1584-24.2944 40.5232-53.3968 77.52-89.112 101.128 1.8064-47.648-15.4512-84.7312-37-117.0944-5.7552-8.5888-17.4256-19.2352-18.0256-24.9792-0.8624-8.3312 9.3536-27.3008 13.0432-39.0656 28.5056-92.2032 50.4816-192.4704 60.0976-302.2704C765.2912 458.52 766.3216 456.7968 766.6592 458.4272L766.6592 458.4272 766.6592 458.4272 766.6592 458.4272zM419.3248 897.8944l183.2 0c-11.1632 22.2336-25.0688 41.6288-36.0624 64.0384-10.8976-7.1296-17.9376-18.1184-27.9776-26.0176-9.1888 29.4512-18.8032 58.6336-28.0752 88.0848-12.1056-28.5904-22.576-58.8048-33.9968-88.0848-8.3296 14.3424-15.1936 30.1376-23.008 45.0704C440.8688 954.3776 430.3104 925.96 419.3248 897.8944L419.3248 897.8944 419.3248 897.8944 419.3248 897.8944zM419.3248 897.8944" fill="#272635" p-id="2590"></path></svg></view>
			  </view>
			  <view style="margin-top: 7px; text-align: center;">升级会员</view>
			</view>

			<view :class="PageCur=='team'?'action text-red':'action text-gray'" @click="NavChange" data-cur="team">
				<view class='cuIcon-cascades'></view>我的团队
			</view>
			<view :class="PageCur=='people'?'action text-red':'action text-gray'" @click="NavChange" data-cur="people">
				<view class='cuIcon-people'></view>会员中心
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		return {
				PageCur: 'home',
				commponent1Key: 0,
				commponent2Key: 0,
			}
		},
		onLoad:function(){
			this.PageCur='home'
			++this.commponent1Key
			++this.commponent2Key
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
			
		}
	}
</script>

<style>
.circle-wrapper {
  width: 60px;  /* 调整宽度 */
  height: 60px;  /* 调整高度 */
  border-radius: 50%;
  background-color: #ff3333;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}


</style>
